{% extends "nav.html" %}
{% block little %}存储-添加主机{% endblock %}
{% block content %}
    <!-- Main Content -->
    <div class="container-fluid">
        <div class="side-body">
            <div class="page-title">
                <span class="title">主机</span>
                <div class="description">主机添加</div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">
                                <div class="title">{{ little }}批量添加</div>
                                <div class="row">
                                    <div class="col-sm-10"><input type="file" id="exampleInputFile"></div>
                                    <div class="col-sm-1" style="margin-top:-5px"><button type="button" class="btn btn-default btn-xs">上   传</button><p class="help-block"></div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <table id = "add_tablist"class="datatable table table-striped" cellspacing="0" width="100%">
                                <tbody>
                                <tr>
                                    <td width="100"><input type="text" class="form-control" placeholder="厂商" id="prodname"/></td>
                                    <td width="100"><input type="text" class="form-control" placeholder="主机型号"id ="prodect"/></td>
                                    <td width="100"><input type="text" class="form-control" placeholder="主机SN"id ="sn"/></td>
                                    <td width="150"><input type="text" class="form-control" placeholder="主机IP,必填项" id="ip"/></td>
                                    <td width="100"><input type="text" class="form-control" placeholder="所属部门" id="hostname"/></td>
                                    <td width="100"><input type="text" class="form-control" placeholder="业务系统" id="app"/></td>
                                    <td width="100"><input type="text" class="form-control" placeholder="业务类型" id="apptype"/></td>
                                    <td width="100"><input type="text" class="form-control" placeholder="主机位置" id="position"/></td>
                                    <td><input type="text" class="form-control" placeholder="主机wwn,存在多个wwn请用空格隔开" id="wwn"/></td>
                                </tr>
                                </tbody>
                            </table>
                            <a type="button" class="btn btn-default" id = "add_host">添 加 一 行</a>
                            <a type="button" class="btn btn-default" id="del_list">删 除 一 行</a>
                            <a type="button" class="btn btn-default"id = "clear_list">全 部 清 除</a>
                            <a type="button" class="btn  btn-success" style="" id="save_list">保 存</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block js %}
    <div class="modal fade" tabindex="-1" role="dialog" id="host_update">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加主机</h4>
                </div>
                <div class="modal-body">
                    <p id="host_err">添加中，请稍候</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default st_close" data-dismiss="modal">关 闭</button>
                    {#                    <button type="button" class="btn btn-primary">Save changes</button>#}
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script>
        var count = 1
        $("#add_host").click(function () {
            console.log("ok")
            var data = $("tbody tr:first").clone()
            $("tbody").append(data)
            count++
            $("#host_count").text(count)
        });
        $("#del_list").click(function () {
            $("tbody tr:last").remove()
            count--
            $("#host_count").text(count)
        });
        $("#clear_list").click(function () {
            location.reload();
            $("#prodname").val("");
            $("#prodect").val("");
            $("#ip").val("");
            $("#hostname").val("");
            $("#sn").val("");
            $("#app").val("");
            $("#apptype").val("");
            $("#position").val("");
            $("#wwn").val("");

        });
        $("#save_list").click(function () {
            $("#host_update").modal('toggle')
            var countnum = 0
            var obj = {}
            $("#add_tablist tbody tr").each(function () {
                countnum++;
                var prodname = $(this).children().find("#prodname").val();
                var prodect = $(this).children().find("#prodect").val();
                var ip = $(this).children().find("#ip").val();
                var hostname = $(this).children().find("#hostname").val();
                var sn = $(this).children().find("#sn").val();
                var app = $(this).children().find("#app").val();
                var apptype = $(this).children().find("#apptype").val();
                var position = $(this).children().find("#position").val();
                var wwn = $(this).children().find("#wwn").val();
                obj[countnum] ={prodname:prodname,prodect:prodect,ip:ip.trim(),hostname:hostname,sn:sn,app:app,apptype:apptype,position:position,wwn:wwn.trim()};
            })
            console.log(obj)
            $.ajax({
                url: "{% url "addhost_ajax" %}",
                type: 'POST',
                data:{data:JSON.stringify(obj)},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        $("#host_err").text("添加成功");
                        location.reload();
                    }else{
                        $("#host_err").text(obj["error"]);
                    };
                }
            });
        });
    </script>
{% endblock %}